<template>
  <div class="VideoContainer">
    <div class="herder" style="margin: 0 auto;width: 1200px;">
      <div v-show="!($router.currentRoute.value.path =='/index/information' || $router.currentRoute.value.path == '/index/recommend')" style="padding-top: 20px">
        <a @click="type=1" :class="type===1?'active':''" style="cursor: pointer;color: #ccc;margin-right: 40px">综合榜</a>
        <a @click="type=2" :class="type===2?'active':''" style="cursor: pointer;color: #ccc;margin-right: 40px">热联榜</a>
        <a @click="type=3" :class="type===3?'active':''" style="cursor: pointer;color: #ccc;margin-right: 40px">新锐榜</a>
        <a @click="type=4" :class="type===4?'active':''" style="cursor: pointer;color: #ccc;margin-right: 40px">最新</a>
      </div>
      <div v-show="!($router.currentRoute.value.path =='/index/information' || $router.currentRoute.value.path == '/index/recommend')" style="padding-top: 20px;cursor: pointer;color: #ccc;">
        <el-button @click="isUp = !isUp" style="background-color:#e9ecec;" round>
          筛选
          <el-icon>
            <ArrowUp v-if="isUp"/>
            <ArrowDown v-else/>
          </el-icon>
        </el-button>
      </div>
    </div>
    <div v-if="isUp"  class="filter-container">
      <el-row v-for="item in ConditionList" :key="item.name">
        <el-col :span="2" class="filter-label el-col-2"
        ><div>{{item.label}}：</div></el-col
        >
        <el-col style="margin-top: -5px" :span="22"
        ><div @click="selectItem(item2)" :class="item2.isChecked?'selectActive':''" class="select-item" v-for="item2 in item.choises" :key="item2.id">
          {{ item2.name }}
        </div></el-col>
      </el-row>
    </div>
    <div class="content"
         v-loading="loading"
         element-loading-text="Loading...">
      <div class="video" v-for="item in VideoList"
           :key="item.id">
        <div style="width: 224px;height: 125px;position: relative" class="img">
          <a target="_blank" :href="`https://www.dance365.com/detail/video?momentId=${item.id}&source=original`">
            <img v-lazyload="item.cover[0]" width="224" height="125" alt="">
            <el-image lazy style="width: 30px;position: absolute;left: 10px" src="//rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="here is play btn icon" class="play_icon"/>
          </a>
        </div>
        <!--   视频信息    -->
        <div class="moment_detail" style="border-radius: 500px">
          <div class="card_detail">
            <div :title="item.title" class="title" style="cursor: pointer;">
              <div class="example" style="width: 224px; padding-top: 10px">
              <span>
                <button style="width:34px;background-color:#fff;border-radius:5px;">教程</button>
                {{item.title}}
              </span>
              </div>
            </div>
            <div class="viewCount" style="margin:30px 0 0 0px">
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            222人浏览
            </span>
            </div>
            <div style="display: flex;width: 180px;justify-content: space-between">
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            点赞{{item.num}}
            </span>
              <span style="font-size: 12px;color: #d8dbe6" class="num">
            评论{{item.initExposureNum}}
            </span>
              <span style="font-size: 12px;color: #d8dbe6" class="num">
            收藏{{item.algorithmSortValue}}
            </span>
            </div>
          </div>
        </div>
        <!--   视频的用户信息    -->
        <div class="creator_info" style="margin-top: 2px;">
          <div style="height: 40px;line-height: 40px;padding-top: 20px;position: relative">
            <img width="30" height="30" style="border-radius: 50%;margin-left: 6px" :src="item.creatorBackup.avatar">
            <span style="display: inline-block;position: absolute;top: 16px;left: 45px">{{item.creatorBackup.name.slice(1,6)}}</span>
            <span style="display: inline-block;position: absolute;top: 16px;left: 160px">11-17</span>
          </div>
        </div>
      </div>
      <div class="isLoad">
        <el-button @click="loadMode" v-show="isLoading">加载更多</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Video",
});

</script>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref, watch} from "vue";
import {
  reqGetNewcomerAsync,
  reqGetNewestAsync,
  reqGetPopTrainingAsync,
  reqGetVideoAsync,
  reqGetWorksAsync
} from "@/api/home";
import {ElMessage} from "element-plus";
import {throttle} from "lodash";
import {useRoute, useRouter} from "vue-router";
import {reqCondition} from "@/api/hobby";

const $router = useRouter()
// 视频数据
const VideoList = ref<any>([])
// 页数
const pageNum = ref<number>(0)
// 控制显示隐藏 加载更多按钮
const isLoading = ref<Boolean>(false)
// 获取首页推荐下的视频以及首页动态下的视频
const getVideo = async (pageNum:number,pageSize:number = 5)=>{
  try {
    loading.value = true
    const re = await reqGetVideoAsync(pageNum,pageSize)
    VideoList.value = re.data.content
    loading.value = false
  }catch (e) {
    ElMessage.error('获取视频失败')
  }
}
onMounted(()=>{
  if (!($router.currentRoute.value.path =='/index/information' || $router.currentRoute.value.path == '/index/recommend')){
    getWorksList()
  }else {
    getVideo(pageNum.value)
  }
})
// 监听页面到底部的回调
const scrollBottom = async ()=>{
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  // console.log('下拉中')
  if (scrollTop + clientHeight >= scrollHeight) {
    // console.log('到底啦')
    isLoading.value = true
    pageNum.value= pageNum.value + 1
    if (pageNum.value < 2) { // 控制图片下拉加载 到2 就开始手动
      // 判断页面 是否拥有herder
      if (!($router.currentRoute.value.path =='/index/information' || $router.currentRoute.value.path == '/index/recommend')){
        switch (type.value) {
          case 1 :
            const re1 =  await reqGetWorksAsync(pageNum.value)
            VideoList.value = [...VideoList.value, ...re1.data.content]
            break;
          case 2:
            const re2 = await reqGetPopTrainingAsync(pageNum.value)
            VideoList.value = [...VideoList.value, ...re2.data.content]
            break;
          case 3:
            const re3 = await reqGetNewcomerAsync(pageNum.value)
            VideoList.value = [...VideoList.value, ...re3.data.content]
            break;
          case 4:
            const re4 = await reqGetNewestAsync(pageNum.value)
            VideoList.value = [...VideoList.value, ...re4.data.content]
            break;
        }
      } else {
        const re = await reqGetVideoAsync(pageNum.value)
        VideoList.value = [...VideoList.value,...re.data.content]
      }
    isLoading.value = false
    }
  }
}
// 初始化调用
onMounted(()=>{
  // 节流
  window.addEventListener('scroll',  throttle(scrollBottom,200));
})
// 离开时销毁
onUnmounted(()=>{
  window.removeEventListener('scroll', scrollBottom) //页面离开后销毁监听事件
})
// 点击获取更多
const loadMode = async ()=>{
  loading.value = true
  if (!($router.currentRoute.value.path =='/index/information' || $router.currentRoute.value.path == '/index/recommend')){
    switch (type.value) {
      case 1 :
        const re1 =  await reqGetWorksAsync(pageNum.value)
        VideoList.value = [...VideoList.value, ...re1.data.content]
        break;
      case 2:
        const re2 = await reqGetPopTrainingAsync(pageNum.value)
        VideoList.value = [...VideoList.value, ...re2.data.content]
        break;
      case 3:
        const re3 = await reqGetNewcomerAsync(pageNum.value)
        VideoList.value = [...VideoList.value, ...re3.data.content]
        break;
      case 4:
        const re4 = await reqGetNewestAsync(pageNum.value)
        VideoList.value = [...VideoList.value, ...re4.data.content]
        break;
    }
  } else {
    const re = await reqGetVideoAsync(pageNum.value)
    VideoList.value = [...VideoList.value,...re.data.content]
  }
  isLoading.value = false
  loading.value = false
}
// 加载中
const loading = ref<Boolean>(true)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

// 分类
const type = ref(1)

// 获取主页下作品综合榜数据
const getWorksList = async ()=>{
  try {
    const re = await reqGetWorksAsync(pageNum.value)
    VideoList.value = re.data.content
    loading.value = false
  }catch (e){
    ElMessage.error('获取综合榜数据失败')
  }
}
watch(type,async (newVal)=>{
  pageNum.value = 0
  switch (newVal) {
    case 1 :
      const re1 = await reqGetWorksAsync(pageNum.value)
      VideoList.value = re1.data.content
      break;
    case 2:
      const re2 = await reqGetPopTrainingAsync(pageNum.value)
      VideoList.value = re2.data.content
      break;
    case 3:
      const re3 = await reqGetNewcomerAsync(pageNum.value)
      VideoList.value = re3.data.content
      break;
    case 4:
      const re4 = await reqGetNewestAsync(pageNum.value)
      VideoList.value = re4.data.content
      break;
  }
})

// 控制筛选的页面是否显示
const isUp = ref(false)
// 保存筛选的条件
const ConditionList = ref([])
onMounted(async ()=>{
  const re =  await reqCondition()
  // 额外添加 是否选中的属性
  ConditionList.value = re.data.content.map((item:any) => {
    item.choises.forEach((items:any) =>{
      items.isChecked = false
    })
    return item
  })
})
// 控制筛选条件 点击的请求发送
const selectItem = async (item2:any)=>{
  item2.isChecked = !item2.isChecked
  pageNum.value = 0
  switch (type.value) {
    case 1 :
      loading.value = true
      const re1 = await reqGetWorksAsync(pageNum.value)
      VideoList.value = re1.data.content
      setTimeout(()=>{
        loading.value = false
      },1000)
      break;
    case 2:
      loading.value = true
      const re2 = await reqGetPopTrainingAsync(pageNum.value)
      VideoList.value = re2.data.content
      setTimeout(()=>{
        loading.value = false
      },1000)
      break;
    case 3:
      loading.value = true
      const re3 = await reqGetNewcomerAsync(pageNum.value)
      VideoList.value = re3.data.content
      setTimeout(()=>{
        loading.value = false
      },1000)
      break;
    case 4:
      loading.value = true
      const re4 = await reqGetNewestAsync(pageNum.value)
      VideoList.value = re4.data.content
      setTimeout(()=>{
        loading.value = false
      },1000)
      break;
  }
}
</script>

<style lang="scss" scoped>
.VideoContainer{
  width: 1200px;
  margin: 0px auto;
  background-color: #f5f7f9;
}
.content{
  width: 1200px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f5f7f9;
}
.video {
  width: 224px;
  height: 288px;
  margin-top: 20px;
  //background-color: pink;
  margin-bottom: 10px;
}
.play_icon{
  margin: 90px 160px 0 0;
}
.card_detail{
  background-color: #fff;
}
.creator_info{
  height: 68px;
  border-radius:4%;
  background-color: #fff;
}
span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.isLoad{
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.active{
  color: #f84185 !important;
}
.herder{
  display: flex;
  justify-content: space-between;
}
.filter-container {
  margin-top: 10px;
  padding: 26px 30px;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 10px;
  position: relative;
}
.select-item {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  color: #7d8090;
  padding: 7px 13px;
  user-select: none;
  margin-right: 24px;
  margin-bottom: 10px;
}
.selectActive{
  background-color: #f93684;
  color: #fff;
}
</style>
